<script setup>
import { ref } from 'vue'

const plants = ref([
  {
    id: 1,
    name: '绿萝',
    species: 'Epipremnum aureum',
    startDate: '2024-01-15',
    lastWatered: '2024-03-20',
    health: 'good',
    image: 'https://placekitten.com/300/300',
    growth: [
      { date: '2024-01-15', height: '10cm', notes: '开始培育' },
      { date: '2024-02-15', height: '15cm', notes: '长出新叶' },
      { date: '2024-03-15', height: '20cm', notes: '生长良好' }
    ]
  },
  {
    id: 2,
    name: '多肉植物',
    species: 'Echeveria',
    startDate: '2024-02-01',
    lastWatered: '2024-03-18',
    health: 'excellent',
    image: 'https://placekitten.com/301/301',
    growth: [
      { date: '2024-02-01', height: '5cm', notes: '新植物' },
      { date: '2024-03-01', height: '7cm', notes: '颜色变红' }
    ]
  }
])

const getHealthStatus = (health) => {
  const statuses = {
    'excellent': { icon: '🌟', color: '#4CAF50' },
    'good': { icon: '🌱', color: '#8BC34A' },
    'fair': { icon: '⚠️', color: '#FFC107' },
    'poor': { icon: '🚫', color: '#F44336' }
  }
  return statuses[health]
}
</script>

<template>
  <div class="plant-list">
    <div class="page-header">
      <h1 class="page-title">我的植物</h1>
      <div class="filter-section">
        <button class="filter-btn active">全部</button>
        <button class="filter-btn">室内植物</button>
        <button class="filter-btn">多肉植物</button>
        <button class="filter-btn">观花植物</button>
      </div>
    </div>
    
    <div class="plants-grid">
      <div v-for="plant in plants" 
           :key="plant.id" 
           class="plant-card">
        <div class="plant-image">
          <img :src="plant.image" :alt="plant.name">
          <div class="health-badge" 
               :style="{backgroundColor: getHealthStatus(plant.health).color}">
            {{ getHealthStatus(plant.health).icon }}
          </div>
        </div>
        
        <div class="plant-info">
          <h3>{{ plant.name }}</h3>
          <p class="species">{{ plant.species }}</p>
          
          <div class="growth-timeline">
            <h4>生长记录</h4>
            <div class="timeline">
              <div v-for="(record, index) in plant.growth" 
                   :key="index"
                   class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <span class="date">{{ record.date }}</span>
                  <span class="height">{{ record.height }}</span>
                  <p class="notes">{{ record.notes }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="plant-actions">
            <button class="action-btn">
              <span>💧</span>
              浇水
            </button>
            <button class="action-btn">
              <span>📝</span>
              记录
            </button>
            <button class="action-btn">
              <span>📊</span>
              详情
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-header {
  margin-bottom: 2rem;
}

.page-title {
  color: #2c3e50;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.filter-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn.active {
  background: #4CAF50;
  color: white;
}

.plants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
}

.plant-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.plant-card:hover {
  transform: translateY(-5px);
}

.plant-image {
  position: relative;
  height: 200px;
}

.plant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.health-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.plant-info {
  padding: 1.5rem;
}

.species {
  color: #666;
  font-style: italic;
  margin: 0.5rem 0 1rem;
}

.growth-timeline {
  margin: 1.5rem 0;
}

.growth-timeline h4 {
  margin-bottom: 1rem;
  color: #4CAF50;
}

.timeline {
  position: relative;
  padding-left: 1.5rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.timeline-item {
  position: relative;
  margin-bottom: 1rem;
}

.timeline-dot {
  position: absolute;
  left: -1.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4CAF50;
  border: 2px solid white;
  margin-top: 5px;
}

.timeline-content {
  background: #f8faf7;
  padding: 0.8rem;
  border-radius: 8px;
}

.timeline-content .date {
  color: #666;
  font-size: 0.9rem;
}

.timeline-content .height {
  float: right;
  color: #4CAF50;
  font-weight: 500;
}

.timeline-content .notes {
  margin-top: 0.5rem;
  color: #444;
}

.plant-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border: none;
  border-radius: 8px;
  background: #f1f8e9;
  color: #4CAF50;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #4CAF50;
  color: white;
}
</style> 